<template>
  <div>
    <el-row  type="flex" class="row-bg">
      <el-col>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">

        <el-form-item label="直播状态">
          <el-select v-model="formInline.selectedVal" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经纪人搜索">
          <el-input v-model="formInline.searchVal" placeholder="请输入姓名/ID"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      </el-col>
    </el-row>
    <div class="live-wrapper">
      <el-card shadow="hover" :body-style="{ padding: '0px' }" v-for="v in LiveList" :key="v.id">
            <div class="image-wrapper">
              <el-image :src="v.previewImg" lazy fit="cover">
                <div slot="placeholder" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <div class="hover-live-item">
                <p>工号：{{v.desc.jobNumber}}</p>
                <p>卖出商品：{{v.desc.sellGoodsNum}}件</p>
                <p>观看人数{{v.desc.viewsNumber}}</p>
                <p>销售额{{parseFloat(v.desc.saleroom).toFixed(2)}}元</p>
              </div>
              <el-tag class="live-item-tag" size="small" :type="v.status?'success':'info'">{{v.status?'直播中':'已结束'}}</el-tag>
            </div>

            <div style="padding: 5px;">
              <div>{{v.title}}</div>
              <div class="live-item-name_time">
                <span>{{v.name}}</span> <span>{{v.startTime}}</span>
              </div>
              <div class="bottom clearfix">
                <el-button type="text" class="button" @click="goToDetail(v)">{{v.status?'进入直播间':'回看'}}</el-button>
                <el-button type="text" class="button" v-if="!v.status">删除</el-button>
                <el-switch
                  v-if="v.status"
                  v-model="v.isEnable"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </div>
            </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import api from '@/api'
export default {
  data () {
    return {
      currentDate: new Date(),
      options: [{
        value: '直播中',
        label: '直播中'
      }, {
        value: '已结束',
        label: '已结束'
      }],
      formInline: {
        searchVal: '',
        selectedVal: ''
      },

      LiveList: [],
      total: 0,
      pageindex: 1,
      pagesize: 36
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async onSubmit () {},
    async getList () {
      const {searchVal,selectedVal} = this.formInline;
      const { data } = await api.getliveList({
        type: selectedVal,
        pageindex: this.pageindex,
        pagesize: this.pagesize,
        keyWord: searchVal,
      })
    
      this.LiveList = data.data.list
      this.total = data.data.total
    },
    goToDetail(v){
      this.$router.push('/liveDetail/'+v.id)
    }
  }
}
</script>

<style lang="less" scoped>

.live-wrapper{
  display: grid;
  grid-template-columns: repeat(6,16%);
  grid-template-rows: repeat(6,260px);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  .image-wrapper{
    height: 150px;
    width: 100%;
    position: relative;
    .el-image{
      width: 100%;
      height: 100%;
      .image-slot{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-icon-picture-outline{
          font-size: 55px;
        }
      }
    }
    .live-item-tag{
      position: absolute;
      bottom: 10px;
      left: 10px;
    }
    &:hover .hover-live-item{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
    .hover-live-item{
      display: none;
      color:#fff;
      width: 100%;
      height: 100%;
      cursor: pointer;
      background: rgba(0,0,0,.5);
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  .live-item-name_time{
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    align-items: center;
  }
  .bottom.clearfix{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
  }
}

</style>
